在人們的印象中，Grafana 的使用者大多是 DevOps 或後端工程師，最常見的應用場景是透過 Prometheus 建立監控圖表等用途，與前端領域幾乎沒有交集。然而，當我們跳脫這種刻板印象，深入思考 Grafana 本身時，會發現它其實包含了豐富的視覺化圖表及可操控的欄位設定，這些 UI 建置工作完全屬於前端工程師的專業範疇。
因此，本系列文章將聚焦於 Grafana Scenes，一個由 Grafana 提供的 React-based 前端框架。開發者可以利用它來打造具備 Grafana 風格與功能的應用程式，讓前端工程師不僅能參與圖表視覺化，還能開發專屬於團隊的 Grafana 功能平台，進一步拓展 Grafana 的應用範圍。
雖然 Grafana Cloud 不斷推出各種實用功能，但基於商業考量，官方未開源這些進階應用服務的程式碼，因此這些功能僅限於付費版本或免費版的有限體驗。然而，透過 Grafana Scenes，我們可以在 Grafana 的開源版本中實現大部分 Grafana Cloud 的進階介面。值得一提的是，許多 Grafana Cloud 上的 Plugin 和工具現在也已經逐步轉向 Grafana Scenes 開發或重構，這更強調了前端開發在 Grafana 生態中的重要性。
在此基礎上，系列文章的後半部將以 Grafana Faro 為例，展示如何使用 Grafana Scenes 克隆出一個前端可觀測性平台，並深入探討可觀測性對於前端開發的深遠影響與價值，讓前端開發不再局限於視覺呈現，而能真正掌握應用的效能與穩定性。
本部分將以一個前端工程師的視角或是從未接觸過 Grafana 的讀者，介紹 Grafana 的基礎知識，包含 Grafana 的架構、Grafana 的資料模型、Grafana 的視覺化圖表工具等，讓讀者能夠初步了解 Grafana 的運作原理與前端工程師在 Grafana 中的角色。
第二部分將以 Grafana Scenes 框架為主軸，介紹前端工程師在 Grafana 中可以使用的工具與技術，包含整體架構、資料請求、變數、視覺化圖表以及進階功能等，讓讀者能夠了解如何使用 Scenes 框架來開發 Grafana 的應用程式。
本部分將以前端工程師的視角，介紹前端領域中門檻較高但需求越來越多的監控和可觀測性觀念，包含 Real User Monitoring、Web Vitals、OpenTelemetry 以及 Grafana 所提供的前端可觀測性工具 - Faro，讓讀者能夠擁有對於前端監控和可觀測性的基礎知識。
第四部分會非常深入的認識 Grafana Faro 這個 Web SDK 如何進行前端應用程式的可觀測性，包括初始化設置、進階設置、與 React 相容性，以及他所收集的資料。
第五部分將以第二、三、四部分的概念，實作一個 Grafana Cloud 版本的可觀測性平台，使用 Grafana Scenes 打造一個功能及資料呈現更完善，且不需付費的前端可觀測性應用程式。
本次組成的 Grafana 科研遠征小隊，是一支集結了對 Grafana 應用所需具備技能的研究團隊。
如果對 Grafana 大規模維運、團隊管理或進階應用有興趣的讀者，可以參考以下系列文：
後 Grafana 時代的自我修養
如果對 Kubernetes 與基礎工程有興趣的讀者，可以參考以下系列文：
都什麼年代了，還在學 Kubernetes
另外，上一屆鐵人賽 SideProject30 組優勝得解作品已出版為：
營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project (iThome 鐵人賽系列書)
若有興趣可參考選購！
筆者語錄
希望這系列文章能夠讓前端工程師了解 Grafana 的生態，並且能夠在未來的開發工作中，將 Grafana 的技術應用到實際的專案中，甚至成為 Grafana 的貢獻者。同時也打破前端與 Grafana 的刻板印象，讓前端工程師也能夠在 Grafana 的生態中發光發熱。
iThome鐵人賽
看影片追技術